<!--
 * @Description: 生成海报组件
 * @Version: 1.0.0
 * @Autor: hch
 * @Date: 2020-08-07 14:48:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-30 09:25:07
 * 保存海报按钮和关闭按钮 在html代码中写出来 绑定点击方法然后透明 再用canvas 覆盖
-->

<template>
  <view class="content">
    <view class="btn" @tap="handleDraw('square1')">正方形</view>
    <view class="btn" @tap="handleDraw('square2')">圆角方形</view>
    <view class="btn" @tap="handleDraw('square3')">圆形</view>
    <view class="btn" @tap="handleDraw('pic1')">图片</view>
    <view class="btn" @tap="handleDraw('text1')">左对齐文本</view>
    <view class="btn" @tap="handleDraw('text2')">居中对齐文本</view>
    <view class="btn" @tap="handleDraw('text3')">右对齐文本</view>

    <view
      class="canvas-content"
      v-show="canvasShow"
      :style="'width:' + system.w + 'px; height:' + system.h + 'px;'"
    >
      <!-- 遮罩层 -->
      <view class="canvas-mask"></view>
      <!-- :width="system.w" :height="system.h" 支付宝必须要这样设置宽高才有效果 -->
      <canvas
        class="canvas"
        :canvas-id="canvasId"
        :id="canvasId"
        :style="'width:' + system.w + 'px; height:' + system.h + 'px;'"
        :width="system.w"
        :height="system.h"
      ></canvas>
      <view class="button-wrapper">
        <!-- 保存海报按钮 -->
        <!-- #ifndef MP-QQ -->
        <!-- cover-view 标签qq小程序有问题 -->
        <cover-view class="save-btn cancel-btn" @tap="handleCancel"
          >取消</cover-view
        >
        <!-- #endif -->
        <!-- #ifdef MP-QQ -->
        <view class="save-btn cancel-btn" @tap="handleCancel">取消</view>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import { drawSquarePic, drawTextReturnH, getSystem } from "./utils";
export default {
  data() {
    return {
      canvasId: "canvas",
      system: {},
      canvasShow: false,
      square1: {
        //正方形
        x: 40,
        y: 40,
        r: 0, //圆角半径
        w: 80, //宽度
        h: 80, //高度
      },
      square2: {
        //圆角方形
        x: 40,
        y: 40,
        r: 10, //圆角半径
        w: 80, //宽度
        h: 80, //高度
      },
      square3: {
        //圆形
        x: 40,
        y: 40,
        r: 40, //圆角半径
        w: 80, //宽度
        h: 80, //高度
      },
      pic1: {
        x: 40,
        y: 40,
        url: "https://huangchunhongzz.gitee.io/imgs/poster/product.png",
        r: 0, //圆角半径
        w: 250, //宽度
        h: 200, //高度
      },
      text1: {
        x: 0,
        y: 40,
        text: "今日上新水果，牛奶草莓",
        fontSize: 16, //字体大小
        color: "#000", //颜色
        lineHeight: 25, //行高
        mt: 0, //margin-top
      },
      text2: {
        x: 0,
        y: 40,
        text: "今日上新水果，牛奶草莓",
        fontSize: 16, //字体大小
        color: "blue", //颜色
        lineHeight: 25, //行高
        mt: 0, //margin-top
        align: "center", //对齐方式
      },
      text3: {
        x: 0,
        y: 40,
        text: "今日上新水果，牛奶草莓",
        fontSize: 16, //字体大小
        color: "red", //颜色
        lineHeight: 25, //行高
        mt: 0, //margin-top
        align: "right", //对齐方式
      },
    };
  },
  created() {
    // 获取设备信息
    this.system = getSystem();
  },
  methods: {
    /**
     * @description: 展示海报
     * @param {type}
     * @return {type}
     * @author: hch
     */
    handleDraw(type) {
      console.log("handleDraw -> type", type);
      this.canvasShow = true;
      this.draw(type);
    },
    /**
     * @description: 绘制
     * @author: hch
     */
    draw(type) {
      uni.showLoading({
        title: "绘制中...",
      });
      if (this.ctx) {
        this.ctx.clearRect(0, 0, this.system.w, this.system.h); //清空之前的海报
        this.ctx.restore(); //恢复之前被切割的canvas，否则切割之外的就没办法用
      } else {
        this.ctx = uni.createCanvasContext(this.canvasId, this);
      }
      let drawData = this[type];
      if (
        type === "square1" ||
        type === "square2" ||
        type === "square3" ||
        type === "pic1"
      ) {
        // 绘制图像/图片
        drawSquarePic(
          this.ctx,
          drawData.x,
          drawData.y,
          drawData.w,
          drawData.h,
          drawData.r,
          drawData.url
        );
      } else {
        // 绘制文本
        let textY = drawTextReturnH(
          this.ctx,
          drawData.text,
          drawData.x,
          drawData.y,
          this.system.w,
          drawData.fontSize,
          drawData.color,
          drawData.lineHeight,
          drawData.align
        );
      }

      uni.hideLoading();
    },
    /**
     * @description: 取消海报
     * @param {type}
     * @return {type}
     * @author: hch
     */
    handleCancel() {
      this.canvasShow = false;
    },
  },
};
</script>

<style lang="scss">
.content {
  margin-bottom: 80rpx;
  overflow: hidden;
  border-bottom: 1rpx solid $uni-border-color;

  .btn {
    float: left;
    width: 30%;
    margin: 10rpx;
    font-size: 30rpx;
    line-height: 72rpx;
    color: #fff;
    text-align: center;
    background: $u-theme-color;
    border-radius: 45rpx;
    border-radius: 36rpx;
  }
}

.canvas-content {
  position: absolute;
  top: 0;
  z-index: 9;

  .canvas-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    background: $u-theme-color;
  }

  .canvas {
    z-index: 10;
  }

  .button-wrapper {
    position: fixed;
    bottom: 20rpx;
    z-index: 16;
    display: flex;
    width: 100%;
    height: 72rpx;
    justify-content: space-around;
  }

  .save-btn {
    z-index: 16;
    width: 40%;
    height: 100%;
    font-size: 30rpx;
    line-height: 72rpx;
    color: #fff;
    text-align: center;
    background: $u-theme-color;
    border-radius: 45rpx;
    border-radius: 36rpx;
  }

  .cancel-btn {
    color: $u-theme-color;
    background: #fff;
  }

  .canvas-close-btn {
    position: fixed;
    top: 30rpx;
    right: 0;
    z-index: 12;
    width: 60rpx;
    height: 60rpx;
    padding: 20rpx;
  }
}
</style>
